import React, { Component } from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';

import JudgeTable from '../../components/JudgeTable';
import  './style.css';

import sgdwny from '../../json/sgdw-ny.json';
import sgdwwyty from '../../json/sgdw-wyty.json';
import sgdwglgc from '../../json/sgdw-glgc.json';
import sgdwsygc from '../../json/sgdw-sygc.json';
import jl from '../../json/jl.json';
import jsdw from '../../json/jsdw.json';

const judgeDateMap = [
  { name: "表1 施工单位内业部分考评价表", data: sgdwny, tableType: 'ny' },
  { name: "表2.1 施工外业通用部分考核评价表", data: sgdwwyty, tableType: 'wy' },
  { name: "表2.2 施工外业公路工程考核评价表", data: sgdwglgc, tableType: 'wy' },
  { name: "表2.1 施工外业水路工程考核评价表", data: sgdwsygc, tableType: 'wy' },
  { name: "表3 监理单位考核评价", data: jl, tableType: 'ny' },
  { name: "表4 建设单位考核评价", data: jsdw, tableType: 'ny' }
];


class Standard extends Component {

  constructor(props) {
    super(props);
    this.state = {
      classifyMenuOpen: false,
      judgeDate: judgeDateMap[0],
      judgeTableMenu: [
        { name: "表1 施工单位内业部分考评价表", selected: true },
        { name: "表2.1 施工外业通用部分考核评价表", selected: false },
        { name: "表2.2 施工外业公路工程考核评价表", selected: false },
        { name: "表2.1 施工外业水路工程考核评价表", selected: false },
        { name: "表3 监理单位考核评价", selected: false },
        { name: "表4 建设单位考核评价", selected: false }
      ]
    }
    ;
  }

  handleToggle = () => this.setState({ classifyMenuOpen: !this.state.open });

  handleClose = (selectIndex) => {
    const { judgeTableMenu } = { ...this.state };
    let newJudgeTableMenu = [];
    let judgeDate = judgeDateMap[selectIndex];
    judgeTableMenu.map((item, index) => {
      if (index === selectIndex) {
        item.selected = true;
        newJudgeTableMenu.push(item);

      } else {
        item.selected = false;
        newJudgeTableMenu.push(item);
      }
      return null;
    });
    this.setState({ judgeDate: judgeDate, judgeTableMenu: newJudgeTableMenu, classifyMenuOpen: false });
  };

  render() {
    const { judgeDate, judgeTableMenu, classifyMenuOpen } = this.state;
    return (
      <div className="standardContainer">
        <div className="classifyMenu">
          <RaisedButton
            label="考核评价表"
            onClick={this.handleToggle}
          />
        </div>

        <div className="body">
          <JudgeTable tableType={judgeDate.tableType} judgeDate={judgeDate.data} judgeTableName={judgeDate.name}/>
        </div>

        <Drawer
          docked={false}
          width={300}
          open={classifyMenuOpen}>
          {judgeTableMenu.map((item, index) =>
            <MenuItem key={index} style={{ fontSize: '14px', fontWeight: 500 }}
                      checked={item.selected}
                      onClick={() => this.handleClose(index)}>{item.name}</MenuItem>
          )}
        </Drawer>

      </div>
    );
  }

}

export default Standard;